import $ from 'jquery';

console.log("this is order/order.js");

function viewOrders(userid) {

    $.ajax({
        url     : "http://localhost:8888/" + "order/" + userid,
        method  : "GET",
        dataType: 'json',
        success : function (data) {
            console.log(data);
            showOrderListTable(data.data);
        },
        error   : function (data) {
            console.log(data);
        }
    })
}

function viewOrderInfo(orderid) {

    $.ajax({
        url     : "http://localhost:8888/" + "order/" + orderid,
        method  : "GET",
        dataType: 'json',
        success : function (data) {
            console.log(data);
            showOrderInfoTable(data.data);
        },
        error   : function (data) {
            console.log(data);
        }
    })
}

function showOrderListTable(data) {
    var content = document.getElementById("Content");
    content.innerHTML = '<h2>My Orders</h2>' +
        '<div id="Order"><table><thead><tr><th>Order ID</th><th>Date</th><th>Total Price</th></tr></thead><tbody id="t1"></tbody></table></div>';
    var tbody = document.getElementById("t1");
    for (var i = 0; i < data.length; i++) {
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        var td1 = document.createElement('td');
        td1.innerHTML = '<a href="#/order/' + data[i].orderId + '" class = "order">' + data[i].orderId + '</a>';

        var td2 = document.createElement('td');
        td2.innerHTML = dates.format(data[i].date, 'yyyy/MM/dd hh:mm:ss');
        tr.appendChild(td1);
        tr.appendChild(td2)
    }
}

function showOrderInfoTable(data){
    var content = document.getElementById("Content");
    content.innerHTML = '<ul class="message"><li>Thank you, your order has been submitted.</li></ul>'+
        '<div id="BackLink"><a href="catalog-main.html">Return to Main Menu</a></div>' + 
        '<div id="Catalog">' + 
            '<table>' + 
                '<tr><th align="center" colspan="2">Order #' + data.orderId + ' ' + dates.format(data.date, 'yyyy/MM/dd hh:mm:ss') + '></th></tr>' +
                '<tr><th colspan="2">Payment Details</th></tr>' +
                '<tr><td>Card Type:</td><td>' + data.cardType + '</td></tr>' +
                '<tr><td>Card Number:</td><td>' + data.creditCard + '</td></tr>' +
                '<tr><td>Expiry Date (MM/YYYY):</td><td>' + data.expiryDate + '</td></tr>' +
                '<tr><th colspan="2">Billing Address</th></tr>' +
                '<tr><td>First name:</td><td>' + data.billToFirstName + '</td></tr>' +
                '<tr><td>Last name:</td><td>' + data.billToLastName + '</td></tr>' +
                '<tr><td>Address 1:</td><td>' + data.billAddress1 + '</td></tr>' +
                '<tr><td>Address 2:</td><td>' + data.billAddress2 + '</td></tr>' +
                '<tr><td>City:</td><td>' + data.billCity + '</td></tr>' +
                '<tr><td>State:</td><td>' + data.billState + '</td></tr>' +
                '<tr><td>Zip:</td><td>' + data.billZip + '</td></tr>' +
                '<tr><td>Country:</td><td>' + data.billCountry + '</td></tr>' +
                '<tr><th colspan="2">Shipping Address</th></tr>' +
                '<tr><td>First name:</td><td>' + data.shipToFirstName + '</td></tr>' +
                '<tr><td>Last name:</td><td>' + data.shipToLastName + '</td></tr>' +
                '<tr><td>Address 1:</td><td>' + data.shipAddress1 + '</td></tr>' +
                '<tr><td>Address 2:</td><td>' + data.shipAddress2 + '</td></tr>' +
                '<tr><td>City:</td><td>' + data.shipCity + '</td></tr>' +
                '<tr><td>State:</td><td>' + data.shipState + '</td></tr>' +
                '<tr><td>Zip:</td><td>' + data.shipZip + '</td></tr>' +
                '<tr><td>Country:</td><td>' + data.shipCountry + '</td></tr>' +
                '<tr><td>Courier:</td><td>' + data.courier + '</td></tr>' +
                '<tr><td colspan="2">Status:</td><td>' + data.status + '</td></tr>' +
                '<tr><td colspan="2"><table><thead><tr><th>Item ID</th><th>Description</th><th>Quantity</th><th>Price</th><th>Total Cost</th></tr></thead><tbody id="t2"></tbody></table></td></tr>';
                var tbody = document.getElementById("t2");
                for (var i = 0; i < data.lineItem.length; i++) {
                    var tr = document.createElement('tr');
                    tbody.appendChild(tr);
                    var td1 = document.createElement('td');
                    td1.innerHTML = '<a href="catalog-main.html#catalog/categories/' + data.lineItem[i].catId + '" class = "product">' + data.lineItem[i].itemId + '</a>';

                    var td2 = document.createElement('td');
                    td2.innerHTML = data.lineItem[i].attr1 + data.lineItem[i].productName;

                    var td3 = document.createElement('td');
                    td3.innerHTML = data.lineItem[i].quantity;

                    var td4 = document.createElement('td');
                    td4.innerHTML = '$' + numbers.formatDecimal(data.lineItem[i].price, 1, 2);

                    var td5 = document.createElement('td');
                    td5.innerHTML = '$' + numbers.formatDecimal(data.lineItem[i].totalPrice, 1, 2);

                    var td6 = document.createElement('td');
                    td6.innerHTML = '$' + numbers.formatDecimal(data.total, 1, 2);

                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    tr.appendChild(td3);
                    tr.appendChild(td4);
                    tr.appendChild(td5);
                    tr.appendChild(td6);
                }
}

window.onhashchange = function () {
    console.log(location.hash)
    var str = location.hash;
    var strList = str.split('/');
    for (var i = 0; i < strList.length; i++) {
        console.log(i + ":" + strList[i]);
    }
    if (strList[1] == "order") {
        viewOrderInfo(strList[2]);
    }
}